
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { useLanguage } from "@/contexts/LanguageContext";
import { Users, UserCheck, MessageSquare, Settings, Plus, Mail } from "lucide-react";

const Classroom = () => {
  const { t } = useLanguage();

  const classes = [
    {
      name: "Biology 101",
      students: 28,
      attendance: 96,
      activeAssignments: 3,
      status: "active"
    },
    {
      name: "Chemistry Lab",
      students: 24,
      attendance: 88,
      activeAssignments: 2,
      status: "active"
    },
    {
      name: "Physics Advanced",
      students: 19,
      attendance: 92,
      activeAssignments: 4,
      status: "active"
    }
  ];

  const recentStudents = [
    {
      name: "Sarah Chen",
      class: "Biology 101",
      status: "present",
      lastSeen: "2 hours ago",
      participation: "high"
    },
    {
      name: "Marcus Johnson",
      class: "Chemistry Lab",
      status: "present",
      lastSeen: "1 hour ago",
      participation: "medium"
    },
    {
      name: "Emma Rodriguez",
      class: "Physics Advanced",
      status: "absent",
      lastSeen: "2 days ago",
      participation: "high"
    },
    {
      name: "David Kim",
      class: "Biology 101",
      status: "present",
      lastSeen: "30 minutes ago",
      participation: "low"
    }
  ];

  const groups = [
    {
      name: "Lab Group Alpha",
      members: 6,
      subject: "Chemistry",
      project: "Acid-Base Reactions"
    },
    {
      name: "Research Team Beta",
      members: 5,
      subject: "Biology",
      project: "Genetics Study"
    },
    {
      name: "Physics Squad",
      members: 4,
      subject: "Physics",
      project: "Motion Analysis"
    }
  ];

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      <Navbar />

      <main className="flex-1 py-8">
        <div className="container mx-auto px-4">
          <div className="mb-8">
            <h1 className="text-4xl font-bold mb-4 text-gray-900">
              {t('classroom.title')}
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl">
              {t('classroom.subtitle')}
            </p>
          </div>

          {/* Quick Actions */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <Button className="h-16 flex flex-col gap-2 bg-blue-600 hover:bg-blue-700">
              <Plus className="w-5 h-5" />
              <span className="text-sm">{t('classroom.addStudent')}</span>
            </Button>
            <Button className="h-16 flex flex-col gap-2 bg-green-600 hover:bg-green-700">
              <UserCheck className="w-5 h-5" />
              <span className="text-sm">{t('classroom.takeAttendance')}</span>
            </Button>
            <Button className="h-16 flex flex-col gap-2 bg-purple-600 hover:bg-purple-700">
              <MessageSquare className="w-5 h-5" />
              <span className="text-sm">{t('classroom.sendMessage')}</span>
            </Button>
            <Button className="h-16 flex flex-col gap-2 bg-gray-600 hover:bg-gray-700">
              <Settings className="w-5 h-5" />
              <span className="text-sm">{t('classroom.classSettings')}</span>
            </Button>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Classes Overview */}
            <div className="lg:col-span-2">
              <Card className="mb-8">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Users className="w-5 h-5" />
                    {t('classroom.myClasses')}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {classes.map((classItem, index) => (
                      <div key={index} className="border rounded-lg p-4 hover:bg-gray-50">
                        <div className="flex justify-between items-start mb-3">
                          <div>
                            <h3 className="font-semibold text-lg">{classItem.name}</h3>
                            <p className="text-gray-600">{classItem.students} {t('classroom.students')}</p>
                          </div>
                          <Badge className="bg-green-100 text-green-700">
                            {t('classroom.active')}
                          </Badge>
                        </div>
                        
                        <div className="grid grid-cols-2 gap-4 text-sm mb-4">
                          <div>
                            <p className="text-gray-600">{t('classroom.attendance')}</p>
                            <p className="font-semibold">{classItem.attendance}%</p>
                          </div>
                          <div>
                            <p className="text-gray-600">{t('classroom.assignments')}</p>
                            <p className="font-semibold">{classItem.activeAssignments} {t('classroom.active')}</p>
                          </div>
                        </div>

                        <div className="flex gap-2">
                          <Button size="sm" variant="outline">
                            {t('classroom.viewClass')}
                          </Button>
                          <Button size="sm" variant="outline">
                            <Mail className="w-4 h-4 mr-1" />
                            {t('classroom.contact')}
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* Student Activity */}
              <Card>
                <CardHeader>
                  <CardTitle>{t('classroom.recentActivity')}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recentStudents.map((student, index) => (
                      <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex items-center gap-3">
                          <div className={`w-3 h-3 rounded-full ${
                            student.status === 'present' ? 'bg-green-500' : 'bg-red-500'
                          }`} />
                          <div>
                            <p className="font-medium">{student.name}</p>
                            <p className="text-sm text-gray-600">{student.class}</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <Badge variant={student.participation === 'high' ? 'default' : 
                                       student.participation === 'medium' ? 'secondary' : 'outline'}>
                            {student.participation} participation
                          </Badge>
                          <p className="text-xs text-gray-500 mt-1">{student.lastSeen}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* Sidebar */}
            <div>
              {/* Learning Groups */}
              <Card className="mb-6">
                <CardHeader>
                  <CardTitle>{t('classroom.learningGroups')}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {groups.map((group, index) => (
                      <div key={index} className="border rounded-lg p-3">
                        <h4 className="font-medium mb-1">{group.name}</h4>
                        <p className="text-sm text-gray-600 mb-2">{group.project}</p>
                        <div className="flex justify-between text-xs">
                          <span className="text-gray-500">{group.members} members</span>
                          <Badge variant="outline" className="text-xs">
                            {group.subject}
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>
                  <Button variant="outline" className="w-full mt-4" size="sm">
                    {t('classroom.manageGroups')}
                  </Button>
                </CardContent>
              </Card>

              {/* Quick Stats */}
              <Card>
                <CardHeader>
                  <CardTitle>{t('classroom.quickStats')}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="text-center">
                      <p className="text-2xl font-bold text-blue-600">71</p>
                      <p className="text-sm text-gray-600">{t('classroom.totalStudents')}</p>
                    </div>
                    <div className="text-center">
                      <p className="text-2xl font-bold text-green-600">92%</p>
                      <p className="text-sm text-gray-600">{t('classroom.avgAttendance')}</p>
                    </div>
                    <div className="text-center">
                      <p className="text-2xl font-bold text-purple-600">9</p>
                      <p className="text-sm text-gray-600">{t('classroom.activeAssignments')}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  );
};

export default Classroom;
